<template>
    <div class="table-container">
        <table class="custom-table">
            <thead>
                <tr>
                    <th>城市</th>
                    <th>就业企业</th>
                    <th>岗位</th>
                    <th>薪资</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(row, index) in tableData" :key="index">
                    <td>{{ row.city }}</td>
                    <td>{{ row.company }}</td>
                    <td>{{ row.position }}</td>
                    <td>{{ row.salary }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup>
import { ref } from 'vue';

// 模拟表格数据
const tableData = ref([
    { city: '上海', company: '百度', position: '前端开发工程师', salary: '19.5K' },
    { city: '上海', company: '百度', position: '前端开发工程师', salary: '19.5K' },
    { city: '上海', company: '百度', position: '前端开发工程师', salary: '19.5K' },
    { city: '上海', company: '百度', position: '前端开发工程师', salary: '19.5K' },
    { city: '上海', company: '百度', position: '前端开发工程师', salary: '19.5K' },
]);
</script>

<style scoped>
/* 父盒子样式 */
.table-container {
    width: 500px;
    height: 180px;
    overflow: hidden;
    /* 去除滚动条 */
    background-color: #0e2342;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    /* 增加阴影 */
}

/* 表格样式 */
.custom-table {
    width: 100%;
    border-collapse: collapse;
    color: white;
    table-layout: fixed;
    /* 保持表格布局一致 */
}

.custom-table thead {
    background-color: #12418d;
    color: #fff;
    font-weight: bold;
}

.custom-table th,
.custom-table td {
    padding: 6px 8px;
    text-align: center;
    white-space: nowrap;
    /* 禁止文本换行 */
    font-size: 12px;
    /* 调整字体大小 */
}

.custom-table tbody tr:nth-child(odd) {
    background-color: #153865;
}

.custom-table tbody tr:nth-child(even) {
    background-color: #102a4a;
}

.custom-table th {
    border-bottom: 2px solid #0c2c54;
}

.custom-table td {
    border-bottom: 1px solid #0c2c54;
}

/* 控制每一列的宽度 */
.custom-table th:nth-child(1),
.custom-table td:nth-child(1) {
    width: 60px;
    /* 城市 */
}

.custom-table th:nth-child(2),
.custom-table td:nth-child(2) {
    width: 80px;
    /* 企业 */
}

.custom-table th:nth-child(3),
.custom-table td:nth-child(3) {
    width: 140px;
    /* 岗位 */
}

.custom-table th:nth-child(4),
.custom-table td:nth-child(4) {
    width: 60px;
    /* 薪资 */
}
</style>